<template>
	<!-- <div class="row-item">
		<div class="title"><span>{{props.label}}</span></div>
		<div style="width: 100%;">
			<el-input-number
				v-model="input_model"
				:min="props.min"
				:max="props.max"
				:step="props.step"
				size="small"
				controls-position="right"
				@change="onchange"
				style="width: 100%;"
			/>
			<div v-if="error" class="el-form-item__error">{{error_message}} </div>
		</div>
	</div> -->
	<ElFormItem :label="props.label">
		<ElInputNumber
			v-model="input_model"
			:min="props.min"
			:max="props.max"
			:step="props.step"
			size="small"
			controls-position="right"
			@change="onchange"
			style="width: 100%;"
		></ElInputNumber>
	</ElFormItem>
</template>

<script lang="ts" setup>
	const props=defineProps({
	  pidentifier:String,
	  identifier:String,
	  label:String,
	  required:Boolean,
	  value:Number,
	  min:Number,
	  max:Number,
	  step:Number
	})
	watch(
　　      () => (props.value),
　　      () => {
			input_model.value=props.value
　　      },
　　    )
	
	const error=ref(false);
	const error_message=ref();
	const input_model=ref();
	const emits = defineEmits(['onchange'])
	const onchange=()=>{
		validate();
		emits('onchange',{
			pidentifier:props.pidentifier,
			identifier:props.identifier,
			value:input_model.value
		})
	}
	
	const validate=()=>{
		if(props.required && input_model.value==''){
			error.value=true
			error_message.value=props.label+'必填.'
			return;
		}
		error.value=false
		error_message.value=''
	}
	
	onMounted(() => {
		input_model.value=props.value
	});
</script>


<style scoped>
	:deep(.el-input-number__decrease) {
	    background: #333333;
	    font-size: 13px;
		border-bottom: 1px solid #191919 !important;
		border-left: 1px solid #191919 !important;
		width: 16px;
	}
	:deep(.el-input-number__increase) {
	    background: #333333;
	    font-size: 13px;
		border-bottom: 1px solid #191919 !important;
		border-left: 1px solid #191919 !important;
		width: 16px;
	}
	
	:deep(.el-input-number.is-controls-right .el-input__wrapper) {
	    padding-left: 15px;
	    padding-right: 26px;
	}
</style>